<template>
    <div class="fixed top-0 left-0 w-screen h-screen flex justify-center items-center flex-col">
        <CoreBackGroundColorComponent />
        <CoreBarNavightionComponent />
        <div class="fixed w-full">
            <div
                class="bg-white mx-5 flex fixed left-0 right-0 justify-center top-40 bottom-1/3 rounded-3xl border border-blue-950 shadow-2xl">
                <div class="flex absolute top-0 justify-center text-black w-full text-center ml-5 mr-5 text-1xl font-bold bg-slate-300 items-center border border-black shadow-xl rounded-br-xl rounded-bl-xl rounded-tr-2xl rounded-tl-2xl"
                    style="height: 30%">
                    <h3>{{ itemsStore.indexId + 1 }}.{{ itemsStore.activeItem?.context }}</h3>
                </div>
                <div class="flex absolute bottom-32 w-full justify-center flex-col mx-6 my-2 items-center">
                    <van-radio-group v-model="itemsStore.checkBox" class="justify-center items-center mx-6">
                        <div class="my-4">
                            <van-radio name="0" class="text-center">是</van-radio>
                        </div>
                        <div class="my-4">
                            <van-radio name="1" class="text-center">否</van-radio>
                        </div>
                    </van-radio-group>
                </div>
                <div v-if="itemsStore.indexId == 0" class="flex absolute bottom-5 w-full justify-center items-center">
                    <van-button type="primary" @click="itemsStore.getNext" block round text="下一题" style="width: 95%" />
                </div>
                <div v-else-if="
                    itemsStore.indexId > 0 && itemsStore.indexId < itemsStore.activeItems.length - 1
                " class="flex absolute bottom-5 w-full justify-center items-center">
                    <div class="text-black w-full text-1xl block justify-center items-center text-center">
                        <van-row justify="center">
                            <van-col span="11">
                                <van-button type="primary" block round text="上一题" @click="itemsStore.getBefore"
                                    style="width: 95%" />
                            </van-col>
                            <van-col span="11">
                                <van-button type="primary" @click="itemsStore.getNext" block round text="下一题"
                                    style="width: 95%" />
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <div v-else-if="
                    itemsStore.indexId > 0 &&
                    itemsStore.indexId == itemsStore.activeItems.length - 1
                " class="flex absolute bottom-5 w-full justify-center items-center">
                    <van-button type="primary" @click="itemsStore.getCount" block round text="提交" style="width: 95%" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const itemsStore = useTestItemStore()
onBeforeMount(async () => {
    await itemsStore.initStore();
});
</script>
<style scoped></style>